<template>
  <div class="photoArr" id="box1" v-if="photoArr.length != 0">
    <div v-for="(item, index) in photoArr" :key="index" class="ke">
      <div class="imgs" :style="{ opacity: imgNum == index ? '1' : '0' }">
        <!-- <img
          :src="item"
          style="object-fit: contain;"
          draggable="true"
          :style="{ opacity: imgNum == index ? '1' : '0' }"
        /> -->
        <el-image
          style="width: 100%;height: 100%;"
          :src="item"
          fit="contain"
          lazy
        >
        </el-image>
      </div>
    </div>
  </div>

  <div class="photoArr" id="box1" v-else>
    <div class="zanwu">暂无模型</div>
  </div>
</template>

<script>
export default {
  name: "model-3d-show",
  props: {
    photoArr: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      imgNum: 0
      // datas: true
    };
  },
  watch: {
    photoArr: {
      immediate: true,
      handler(oldVal, newVal) {
        // console.log("newVal change:", newVal);
        // this.photoArr = newVal;
        // console.log("length:::", this.photoArr.length);
        // if (this.photoArr.length == 0) {
        //   this.datas = false;
        // } else {
        //   this.datas = true;
        // }
      }
    }
  },
  created() {
    var _this = this;
    // setTimeout(() => {
    //   console.log("photoArr.length:", this.photoArr.length);
    //   if (this.photoArr.length == 0) {
    //     _this.datas = false;
    //   } else {
    //     _this.datas = true;
    //   }
    // }, 1000);

    window.onload = function() {
      var box1 = document.getElementById("box1");
      box1.onmousedown = function(e) {
        e.preventDefault();
        _this.coord = e.pageX;
        //为document绑定
        document.onmousemove = function(event) {
          // console.log("正在滑动！", event.clientX);
          event = event || window.event;
          //获取鼠标的位置：
          // var x = event.clientX;
          // var y = event.clientY;
          // console.log("x:", x, "y:" + y);
          _this.touchmove(event);
        };
        //为元素绑定一个松开事件
        document.onmouseup = function() {
          //当松开时候，被拖拽元素固定在当前位置
          // console.log("鼠标放开！");
          //取消onmousemove事件
          document.onmousemove = null;
          document.onmouseup = null; //一次性事件
        };
      };
    };
  },
  mounted() {
    // console.log("length:", this.photoArr.length);
  },
  methods: {
    touchmove(e) {
      var _this = this;
      // console.log("touchmove的e:", e);
      let num = this.coord;
      let moveNum = e.pageX;
      let imgNum = this.imgNum;
      let imgLength = this.photoArr.length;
      let bad = moveNum - num;
      if (bad > 10) {
        if (imgNum < imgLength - 1) {
          imgNum++;
          this.coord = moveNum;
          this.imgNum = imgNum;
        } else if (imgNum == imgLength - 1) {
          this.coord = moveNum;
          this.imgNum = 0;
        }
      } else if (bad < -10) {
        if (imgNum > 0) {
          imgNum--;
          this.coord = moveNum;
          this.imgNum = imgNum;
        } else if (imgNum == 0) {
          this.coord = moveNum;
          this.imgNum = imgLength - 1;
        }
      }
      // console.log("imgNum:", this.imgNum);
    }
  }
};
</script>

<style scoped lang="scss">
.photoArr {
  position: relative;
  width: 100%;
  height: 100%;
  .ke {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    // display: flex;
    // align-items: center;

    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    // text-align: center;
    // width: 96%;
  }
  .imgs {
    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
}
.zanwu {
  position: absolute;
  top: 44%;
  left: 30%;
  text-align: center;
  justify-content: center;
  justify-items: center;
  /*color: red;
  font-family: "楷体", "楷体_GB2312";
  font-weight: bold;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
  font-family: siyuan_regular;
  font-size: 32px;
}
</style>
